<script setup lang="ts">
import Resource from '@/components/Resource.vue'
import { Delete, Document, Download, Search, Upload } from '@element-plus/icons-vue'
import router from '@/router'
import { ref } from 'vue'
import { adminDeleteCoursewareService, adminGetCoursewareList } from '@/api/admin'
import { ElMessageBox } from 'element-plus'
import { useCountStore } from '@/stores/TeaStatisticsCount'

interface CoursewareInterface {
  id: number
  title: string
  remark: string
  coursewareUrl: string
  createTime: string
  publisher: string
}

const CoursewareList = ref<CoursewareInterface[]>([])

const formData = ref({
  currentPage: 1,
  pageSize: 10,
  searchContent: '',
  sort: 'time_desc' // 可以设置默认值为时间倒序
})

const totalPage = ref(0)

const updateCourseware = () => {
  router.push('/teacher/resource/courseware/add')
}

const getCoursewareList = async () => {
  const res = await adminGetCoursewareList(formData.value)
  CoursewareList.value = res.data.data.records
  totalPage.value = res.data.data.total
}
getCoursewareList()

const downloadCourseware = (url: string) => {
  window.location.href = url
}

const onlineView = (id: any) => {
  router.push(`/teacher/resource/courseware/${id}`)
}

const deleteSource = async (id: number) => {
  await ElMessageBox.confirm('确认删除该课件吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await adminDeleteCoursewareService(id)
  ElMessage.success('删除成功')
  await getCoursewareList()
  await useCountStore().getContentCount()
}
</script>

<template>
  <div id="main-TeaResourceDocumentPage">
    <div class="update-area">
      <div style="display: flex; width: 550px; margin-left: 20px; justify-content: space-between">
        <el-input
          placeholder="请输入名称进行搜索"
          v-model="formData.searchContent"
          :prefix-icon="Search"
          style="width: 250px"
          @keyup.enter="getCoursewareList"
        ></el-input>
        <el-select placeholder="请选择排序方式" style="width: 200px" v-model="formData.sort">
          <el-option label="按时间倒序" value="time_desc"></el-option>
          <el-option label="按时间正序" value="time_asc"></el-option>
          <el-option label="按标题正序" value="title_asc"></el-option>
          <el-option label="按标题倒序" value="title_desc"></el-option>
        </el-select>
        <el-button @click="getCoursewareList" type="primary">搜索</el-button>
      </div>
      <el-button
        style="position: absolute; right: 20px"
        :icon="Upload"
        type="primary"
        @click="updateCourseware"
        >上传文档
      </el-button>
    </div>
    <div class="video-list">
      <el-scrollbar height="70vh">
        <Resource v-for="courseware of CoursewareList" :key="courseware.id">
          <template #title>{{ courseware.title }}</template>
          <template #remark>{{ courseware.remark }}</template>
          <template #publisher>{{ courseware.publisher }}</template>
          <template #createTime>{{ courseware.createTime }}</template>
          <template #watch>
            <el-icon @click="onlineView(courseware.id)" style="font-size: 25px">
              <Document />
            </el-icon>
            <a @click="onlineView(courseware.id)">查看</a>
          </template>
          <template #download>
            <el-icon @click="downloadCourseware(courseware.coursewareUrl)" style="font-size: 25px">
              <Download />
            </el-icon>
            <a :href="courseware.coursewareUrl">下载</a>
          </template>
          <template #delete>
            <el-icon @click="deleteSource(courseware.id)" style="font-size: 25px">
              <Delete />
            </el-icon>
            <a @click="deleteSource(courseware.id)">删除</a>
          </template>
        </Resource>
      </el-scrollbar>
      <div class="pagination-area">
        <el-pagination
          v-model:current-page="formData.currentPage"
          background
          layout="prev, pager, next"
          @current-change="getCoursewareList"
          :total="totalPage"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.update-area {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
}

.pagination-area {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
